Black Friday Sale Upgrade Your Home →

Connect React app to a serverless backend deployed with CDK and fix CORS issues

Let's connect our backend to a frontend react application. Download the frontend

Your root directory should now look like this:

.
├── frontend
└── todoApp

Go to frontend and install all dependencies by running:

  • yarn install.

And then:

  • yarn start

Unfortunately, you'll get the following error:

  • failed to load resource: net::ERR_NAME_NOT_RESOLVED.

To fix the error, go to the app.tsx in the frontend application.

There's an issue with the APIendpoint which we should be passing as an env variable REACT_APP_TODO_ENDPOINT (in the .env file). Replace the dummy url provided with your own (you can copy it from the REST Client).

👍 Restart the app and try again.

Now we will encounter a CORS issue. To fix it modify the createReponse function in your lambda file so that it includes the two headers properties and returns this:

TS
return {
    statusCode,
    headers: {
      // this API can be accessed from all origins
      "Access-Control-Allow-Origin": "*",
      // and will allow for all of these methods
      // OPTIONS is a pre-flight method and is sent before the actual method `GET`, `POST`, `DELETE`
      "Access-Control-Allow-Methods": "OPTIONS,GET,POST,DELETE"
    },
    body: JSON.stringify(body, null, 2)
};

🤔 More about the OPTIONS method.

Finally, add this to the handler (in the same file):

TS
if (httpMethod === "OPTIONS") {
    return createResponse("ok");
}

👍 Deploy, and now your frontend app should be working.

Add a custom CloudFormation stack output with CDK

Let's fix the missing logo at the bottom of our todo application. We need to tell our frontend application to source it from our s3 logoBucket.

Instead of manually searching for the logo url in our aws console (not a true hacker move!), we can output the url in our terminal with each deployment.

To do that, let's modify the output in our stack file by adding this:

TS
new cdk.CfnOutput(this, "LogoPath", {
    // add the name of your bucket and your file (in the assets folder)
    value: `https://${logoBucket.bucketDomainName}/testFile.png`
});

👍 Once you deploy, you should see the logo path in the output section.

Now go to the frontend application and add this url as the logo src (in app.tsx).

  Previous      Next